<!DOCTYPE html>
<html class="no-js" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="viewport"  content="width=device-width, initial-scale=1" />
    <meta name="renderer" content="webkit" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-mobile-web-app-title" content="合得" />
    <meta name="msapplication-TileImage" content="@{/assets/favico.ico}" />
    <meta name="msapplication-TileColor" content="#0e90d2" />

    <!--<meta name="_csrf" th:attr="content=${_csrf.token}"/>
    <meta name="_csrf_header" th:attr="content=${_csrf.headerName}"/> -->

    <title>用户绑定</title>

    <script type="text/javascript" th:src="@{/jquery/jquery.min.js}"></script>

    <link rel="stylesheet" type="text/css" media="screen" th:href="@{/amazeui/assets/css/amazeui.min.css}" />
    <link rel="stylesheet" type="text/css" media="screen" th:href="@{/amazeui/assets/css/admin.css}" />
    <script type="text/javascript" th:src="@{/amazeui/assets/js/amazeui.min.js}"></script>
    <script type="text/javascript" th:src="@{/assets/js/Math.uuid.js}"></script>
    <script type="text/javascript" th:src="@{/assets/js/tool.js}"></script>
    <script type="text/javascript" th:src="@{/assets/js/commons.js}"></script>
    <script>
        $(function(){
            $("#send").click(function (){
                var url = "/verification/code/send.do?to="+$("#to").val()+"&imageCode="+$("#imageCode").val();
                $.get(url,function(result){
                    alert("send success")
                });
            });
            $("#imgCode").click(getImageCode());
        })
        function getImageCode(){
            $.get("/verification/code/image.do",function(result){
                $("#imgCode").attr("src","data:image/png;base64,"+result);
            });
        }
    </script>
</head>
<body>
<div class="am-g">
    <div class="am-u-sm-2">&nbsp;</div>
    <div class="am-u-sm-8">
        <form class="am-form" method="post" th:action="@{/endpoint/oauth2/bind.do}">
            <fieldset>
                <legend>绑定手机号</legend>

                <div class="am-form-group">
                    <label for="to">手机号</label>
                    <input type="text" name="to" class="" id="to" placeholder="输入手机号">
                </div>

                <div class="am-form-group">
                    <label for="imageCode">图片验证码</label>
                    <input type="text" class="" id="imageCode" placeholder="输入图片验证码">
                    <img id="imgCode">
                </div>

                <div class="am-form-group">
                    <label for="doc-ipt-smsCode-1">短信验证码</label>
                    <input type="text" class="" id="doc-ipt-smsCode-1" name="code" placeholder="输入短信验证码">
                    <input type="button" id="send" class="am-btn am-btn-primary am-btn-sm am-fl" value="发送"/>
                </div>
                <p><button type="submit" class="am-btn am-btn-default">提交</button></p>
            </fieldset>
        </form>
    </div>
    <div class="am-u-sm-2">&nbsp;</div>
</div>


</body>
</html>